import React from 'react'
import { Pagination } from 'antd';
import './Paging.scss'

export interface PagingProps {
    currentPage?: number;
    pageSize?: number;
    total: number;
    onChange: (page: number, pageSize: number) => void;
    onSizeChange: (page: number, pageSize: number) => void;
    pageSizeOptions?: number[];
}
const pageSizeOptionsDef = [2, 5, 7, 10, 15,];
const Paging: React.FC<PagingProps> = (
    {
        currentPage, // 当前页
        pageSize,  // 每页条数
        total,  // 总条数
        onChange,  // 页码改变的回调，参数为改变后的页码及每页条数
        onSizeChange,  // pageSize 变化的回调
        pageSizeOptions // 指定每页可以显示多少条
    }
) => {
    return (
        <div>
            <div className='PageSize'>
                <Pagination
                    total={total}
                    current={currentPage ? currentPage : 1}
                    // defaultCurrent={1}
                    pageSize={pageSize ? pageSize : 5}
                    pageSizeOptions={pageSizeOptions ? pageSizeOptions : pageSizeOptionsDef}
                    showSizeChanger
                    showQuickJumper
                    showTotal={(total) => `总 ${total} 条`}
                    onShowSizeChange={onSizeChange}
                    onChange={onChange}
                />
            </div>
        </div>
    )
}

export default Paging